<template>
	<div class="goods-item" @click="itemClick" >	
		<!-- <img :src="showImg" @load="itemimageLoad"> -->
		<img v-lazy="showImg" @load="itemimageLoad" :key="showImg">
		<div class="goods-info">
			<p>{{goodsitem.title}}</p>
			<span class="price">{{goodsitem.price}}</span>
			<span class="collect">{{goodsitem.cfav}}</span>
		</div>
	</div>
</template>

<script>
	export default{
		name:'GoodsListItem',
		props:{
			goodsitem:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		computed:{
			//判断有没有这个路径，没有就找下一个
			showImg(){
				return this.goodsitem.image || this.goodsitem.show.img || this.goodsItem.img 
			}
		},
		methods:{
			itemClick(){
				this.$router.push('/detail/' + this.goodsitem.iid)
			},
			itemimageLoad(){
				if (this.$route.path.indexOf('/home')) {
					this.$bus.$emit('itemimageLoad')
				}else if (this.$route.path.indexOf('/detail')) {
					this.$bus.$emit('itemimageLoad')
					
				}
				
			}
		}
	}
</script>

<style scoped>
	.goods-item{
		padding-bottom: 50px;
		position: relative;
		width:48%;
	}
	.goods-item img{
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}
	.goods-info{
		font-size: 12px;
		position: absolute;
		bottom:5px;
		left: 0;
		right: 0;
		text-align: center;
		overflow: hidden;
	}
	.goods-info p{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space:nowrap;
		margin-bottom:2px;
	}
	.goods-info .price{
		color: #FF5577;
		margin-right: 20px;
	}
	.goods-info .collect{
		position: relative;
	}
	.goods-info .collect::before{
		content: '';
		position: absolute;
		top: 1px;
		left: -15px;
		width: 14px;
		height: 14px;
		background:url("~assets/img/common/collect.svg") 0 0/14px 14px;
	}
</style>
